<template>
  <a-layout>
    <a-layout-header class="bg-white admin-content-header">
      <div class="col-4 admin-tiao-left">
        <span>{{ $route.name }}</span>
      </div>
      <div class="col-8 text-right">
        <el-button-group>
          <el-button type="primary" @click="dialog1 = true">添加小节</el-button>
          <el-button type="primary" @click="dialog2 = true">添加教师资料</el-button>
          <el-button type="primary" @click="dialog3 = true">添加课程文件</el-button>
        </el-button-group>
      </div>
      <el-dialog title="添加小节" :visible.sync="dialog1">
        <addlession v-bind="{course: datas,setdialog:setdialog1, id: courseId,start: getdatas}"></addlession>
      </el-dialog>
      <el-dialog title="添加老师课件" :visible.sync="dialog2">
        <addResources v-bind="{setdialog:setdialog2, id: courseId,gettracherfiles}"></addResources>
      </el-dialog>
      <el-dialog title="添加课程文件" :visible.sync="dialog3">
        <addfileurl v-bind="{setdialog:setdialog3, id: courseId}"></addfileurl>
      </el-dialog>
    </a-layout-header>
    <a-layout-content class="admin-content-table bg-white">
      <h4 class="coursebyid-h4">课程信息</h4>
      <el-row>
        <el-col>
          <span class="font-weight-bold">名称:</span>
          <span v-text="datas.Course.name"></span>
        </el-col>
        <el-col>
          <span class="font-weight-bold">课程分组:</span>
          <span v-text="datas.Course.catebagid"></span>
        </el-col>
        <el-col>
          <span class="font-weight-bold">简介:</span>
          <span v-text="datas.Course.introduction"></span>
        </el-col>
      </el-row>
      <h4 class="coursebyid-h4">小节</h4>
      <el-table height="100%" :data="Lession" style="width: 100%">
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <a-button v-if="scope.row.type ==='vector'" type="primary">
              <a
                :href="`/wordliulan.html?secretfileID=${scope.row.secretfileID}`"
                target="view_window"
              >查看</a>
            </a-button>
            <a-button v-else type="primary">
              <router-link
                :to="{ name: '课程视频', params:{lid: scope.row.ID}, query:{name: datas.Course.name, id: datas.Course.ID} }"
              >查看</router-link>
            </a-button>
            <a-button @click="deleteRow({lid: scope.row.ID})" type="primary">移除</a-button>
          </template>
        </el-table-column>
      </el-table>
      <h4 class="coursebyid-h4">课程资源</h4>
      <el-table height="100%" :data="tracherfiles" style="width: 100%">
        <el-table-column prop="type" label="课件名称" width="200">
          <template slot-scope="scope">{{scope.row.info.name}}</template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="200">
          <template slot-scope="scope">{{scope.row.info.type === '1'?'全部用户可用':'教师可用'}}</template>
        </el-table-column>
        <el-table-column prop="fileurl" label="文件路径">
          <template slot-scope="scope">
            <a-button type="link">
              <a :href="scope.row.fileurl" target="view_window">{{scope.row.fileurl}}</a>
            </a-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <a-button @click="delteacherfile({fid: scope.row.ID})" type="primary">移除</a-button>
          </template>
        </el-table-column>
      </el-table>
      <h4 class="coursebyid-h4">软件</h4>
      <el-table height="100%" :data="getFileurl.filter(v=> v.course_ID == courseId)" style="width: 100%">
        <el-table-column prop="name" label="课件名称" width="130"></el-table-column>
        <el-table-column prop="img_URL" label="图片" width="154">
          <template slot-scope="scope">
            <img width="154" :src="scope.row.img_URL" class="banner" />
          </template>
        </el-table-column>
        <el-table-column prop="system" label="操作系统" width="104"></el-table-column>
        <el-table-column prop="arch" label="计算机架构" width="104"></el-table-column>
        <el-table-column prop="fileurl" label="文件路径">
          <template slot-scope="scope">
            <a-button type="link">
              <a :href="scope.row.fileurl" target="view_window">{{scope.row.file_URL}}</a>
            </a-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <a-button @click="delteacherfile({fid: scope.row.ID})" type="primary">移除</a-button>
          </template>
        </el-table-column>
      </el-table>
    </a-layout-content>
  </a-layout>
</template>

<script>
import {
  asyncgetCourseAndLessionsByCourseID,
  asyncdeleteLession,
  asyncselectCoursefile,
  asyncdeleteCoursefile,
  asyncdelFileurl
} from "../../../plugins/api.js";
import addlession from "./addlession.vue";
import addResources from "./addResources.vue";
import addfileurl from "./addfileurl.vue";

import { mapGetters } from "vuex";
export default {
  name: "coursebyid",
  data() {
    return {
      dialog1: false,
      dialog2: false,
      dialog3: false,
      datas: {
        Course: {},
        Lession: []
      },
      tracherfiles: []
    };
  },
  props: ["courseId"],
  computed: {
    ...mapGetters(["getFileurl"]),
    Lession() {
      const { datas } = this;
      return datas.Lession;
    }
  },
  watch: {
    $toute() {
      this.start();
    }
  },
  mounted() {
    this.start();
  },
  methods: {
    async start() {
      let id = this.courseId;
      const { getdatas, gettracherfiles } = this;
      try {
        await getdatas(id);
        await gettracherfiles(id);
      } catch (err) {
        this.$message({
          type: "error",
          message: `${err}`
        });
        this.$router.push("/watchcourse");
      }
    },
    async getdatas(cid) {
      this.datas = await asyncgetCourseAndLessionsByCourseID({
        cid
      });
    },
    async gettracherfiles(cid) {
      this.tracherfiles = await asyncselectCoursefile({
        cid
      });
    },
    setdialog1() {
      this.dialog1 = false;
    },
    setdialog2() {
      this.dialog2 = false;
    },
    setdialog3() {
      this.dialog3 = false;
    },
    async deldata(data) {
      try {
        await asyncdelFileurl(data);
        this.$store.dispatch("actionFileurl");
        this.$message({
          message: "恭喜你，删除成功",
          type: "success"
        });
      } catch (err) {
        this.$message({
          message: err,
          type: "error"
        });
      }
    },
    async deleteRow(data) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          try {
            await asyncdeleteLession(data);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.start();
          } catch (err) {
            this.$message({
              type: "error",
              message: `${err}`
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async delteacherfile(data) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          try {
            await asyncdeleteCoursefile(data);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.start();
          } catch (err) {
            this.$message({
              type: "error",
              message: `${err}`
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  components: {
    addlession,
    addResources,
    addfileurl
  }
};
</script>

<style scoped>
.coursebyid-h4 {
  margin-top: 25px;
}
.admin-content-table {
  padding-left: 25px;
  padding-right: 25px;
}
</style>